<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">个人中心</block>
		</cu-custom>
		
		<view v-if="isInit">
			
			<!-- 头像信息 begin -->
			<view class="cu-list menu-avatar">
				<view class="cu-item">			
					<view class="cu-avatar round lg" :style="'background-image:url('+userinfo.avatar+');'"></view>					
					
					<view class="content">						
						<view @tap="navigateTo({url:'/pages/my/log/log'})" class="flex justify-between" v-if="userinfo.isAuth">
							<view style="display: block;">
								<view class="text-black align-center flex">
									<text>{{userinfo.name}}</text> 
									<image v-for="(item,index) in userinfo.badges" :key="index" class="margin-left-xs" style="width: 20px;height: 20px;" mode="aspectFit" :src="item.badge.img"></image>
								</view>
								<view class="flex text-gray text-sm">									
									<image style="width: 30px;height: 30px;" mode="aspectFit" :src="userinfo.levelDetail.img"></image>
									<text class="margin-left-xs" style="padding-top:5px;">
										<text v-if="!userinfo.levelDetail.isMax">仅需<text class="text-red margin-lr-xs">{{userinfo.toNextLevelNeed}}</text>经验值升级</text>
										<text v-else class="text-orange">恭喜您已达最高级!!!</text>
										
										<text class="margin-left-xs cuIcon-right"></text>
									</text>
								</view>
							</view>							
						</view>						
						<view v-else @tap="goReg" class="text-bold text-black">
							请点此进行注册
						</view>
						
					</view>
					
					<view class="action" style="width: 150rpx;" v-if="userinfo.isAuth">
						<uni-icons type="gear" size="25" @tap="goConfig"></uni-icons>
					</view>
					
				</view>
			</view>
			<!-- 头像信息 end -->
						
			<!-- 福利相关部分 begin -->
			<view class="cu-bar justify-start bg-white">
				<view class="action border-title">
					<text class="text-bold text-orange">我的福利</text>
					<text class="bg-gradual-orange" style="width:5rem"></text>
				</view>
			</view>			
			<view class="flex">
				<view class="flex-sub">
					<view class="flex bg-white padding" style="margin-top:0;padding-top:0;">
						<view @tap="showSignWin()" class="flex-sub flex align-center">
							<uni-icons type="calendar" :color="userinfo.isAuth?'#f55246':'#AAAAAA'" size="42"></uni-icons>
							<view class="margin-left-xs">
								<view class="flex align-center">
									<view>签到日历</view>
									<uni-icons style="margin-left:6px;margin-top: 2px;" color='gray' size="14" type="forward"></uni-icons>
								</view>
								<text class="text-sm text-gray">
									<text v-if="hasSignToday">您已连续签到 <text class="margin-lr-xs text-red">{{consecutiveDays}}</text> 天</text>
									<text v-else>点此进行签到</text>
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-sub">
					<view class="flex bg-white padding" style="margin-top:0;padding-top:0;">
						<view @tap="goGold" class="flex-sub flex align-center">
							<uni-icons type="medal" :color="userinfo.isAuth?'#f55246':'#AAAAAA'" size="42"></uni-icons>
							<view class="margin-left-xs">
								<view class="flex align-center">
									<view>积分商城</view>
									<uni-icons style="margin-left:6px;margin-top: 2px;" color='gray' size="14" type="forward"></uni-icons>
								</view>
								<text class="text-sm text-gray">									
									<text v-if="userinfo.isAuth&&userinfo.gold&&userinfo.gold>0">您现有<text class="margin-lr-xs text-red">{{userinfo.gold}}</text>积分</text>
									<text v-else>授权查看积分</text>
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 福利相关部分 end -->
			
			<!-- 我的服务部分 begin -->
			<view class="cu-bar justify-start bg-white">
				<view class="action border-title">
					<text class="text-bold text-blue">我的信息</text>
					<text class="bg-gradual-blue" style="width:5rem"></text>
				</view>
			</view>			
			<view class="cu-list grid col-4 no-border" style="margin-top:0;padding-top:0;">				
				<view class="cu-item" @tap="goFavorite">
					<view :class="(userinfo.isAuth?'text-red':'text-gray')+' cuIcon-favor margin-0-top-i'"></view>					
					<text>我的收藏</text>
				</view>				
				<view class="cu-item" @tap="goHistory">
					<view :class="(userinfo.isAuth?'text-red':'text-gray')+' cuIcon-text margin-0-top-i'"></view>	
					<text>浏览记录</text>
				</view>
				<view class="cu-item" @tap="goLog">
					<view :class="(userinfo.isAuth?'text-orange':'text-gray')+' cuIcon-medal margin-0-top-i'"></view>
					<text>等级徽章</text>
				</view>
				<view class="cu-item" @tap="goChat">
					<view class="text-orange cuIcon-community margin-0-top-i"></view>
					<text>智能助理</text>					
				</view>
			</view>			
			<view class="cu-list grid col-4 no-border solids-bottom" style="margin-top:0;padding-top:0;">
				<view class="cu-item" @tap="goComment">
					<view :class="(userinfo.isAuth?'text-red':'text-gray')+' cuIcon-comment margin-0-top-i'"></view>					
					<text>我的评论</text>
				</view>				
				<view class="cu-item" @tap="goReComment">
					<view :class="(userinfo.isAuth?'text-red':'text-gray')+' cuIcon-like margin-0-top-i'"></view>	
					<text>我要推荐</text>
				</view>
				<view class="cu-item" @tap="goReferrer">
					<view :class="(userinfo.isAuth?'text-orange':'text-gray')+' cuIcon-present margin-0-top-i'"></view>
					<text>推广有礼</text>
				</view>
				<view class="cu-item" @tap="goMessage">
					<view class="text-orange cuIcon-notice margin-0-top-i">
						<view v-if="messageAttention.hasNew" class='cu-tag badge'></view>
					</view>
					<text>信息公告</text>
				</view>
			</view>
			<!-- 我的服务部分 end -->
						
			<!-- 设置信息部分 begin -->
			<view class="cu-modal margin-top-sm" :class="showUserinfo?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">设置基本信息</view>
						<view class="action" @tap="showUserinfo=false">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view>						
						<view class="cu-form-group solid-bottom">
							<view class="title">您的昵称</view>
							<input class="text-left" placeholder="请输入您的昵称" name="input" type="nickname" v-model="edit_user_info.name"></input>					
						</view>
						<view class="cu-bar bg-white">
							<view class="action">
								您的头像
							</view>
						</view>
						<view class="cu-form-group">
							<view class="avatarUrl">
								<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
									<image :src="edit_user_info.avatar" class="refreshIcon"></image>
								</button>
							</view>
						</view>
						<view class="cu-bar bg-white flex justify-center">
							<button class="cu-btn bg-red radius" style="width: 95%;" @tap="changeInfo()">修改</button>
						</view>						
					</view>						
				</view>
			</view>
			<!-- 设置信息部分 end -->
			
			<!-- 每日签到部分 begin -->
			<uni-calendar ref="calendar" :need-title="true" @confirm="confirm" startDate='2024-11-1' endDate='2024-11-30' :selected="selected" :insert="false" >
				<text slot="title">您已连续签到 <text class="margin-lr-xs text-red">{{consecutiveDays}}</text> 天</text>
			</uni-calendar>
			<!-- 每日签到部分 end -->
					
		</view>
		
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import * as confirm from '@/common/confirm.js'
	import * as upload from '@/common/upload.js'
	
	import {mapGetters} from 'vuex'
	
	import infoWin from "@/components/info-win/info-win"
	import uniCalendar from "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue"
	
	export default {
		components:{
		        infoWin,uniCalendar
		},
		data() {
			return {
				//状态数据
				isInit:false,
				showUserinfo:false,//显示修改信息界面
				hasSignToday:false,
				consecutiveDays:0,
				selected:[],
				userinfo:{name:'微信用户'},//用户信息
				userCompanyInfo:{},
				old_avatar:[],	//旧头像
				//修改信息部分
				edit_user_info:{name:'',avatar:''},
				imgList:[],
				messageAttention:{hasNew:false}
			}
		},
		computed:{
			isAuth:function(){
				if(this.userinfo&&this.userinfo.isAuth){
					return this.userinfo.isAuth
				}else{
					return false
				}
			},
			needAdd(){
				let res=0;
				if(this.userinfo){
					if(this.userinfo.major==null){
						res++;
					}
					if(!this.userinfo.hasIdCard){
						res++;
					}
					return res>0?'待完善':0;
				}else{
					return '待完善'
				}
			}
		},
		created(){			
			this.$api.post('/user/ckIsAuth').then(res => {
				this.userinfo=res.data
				
				if(this.userinfo.isAuth){
					this.$api.post('/user/has_sign_today').then(res => {
						this.hasSignToday=res.data
						if(this.hasSignToday){
							this.userSign()
						}
					})					
					this.$api.post('/user/new_message_attention').then(res => {
						this.messageAttention=res.data
					})
				}
								
				this.isInit=true
			})
		},
		watch:{
			"$store.state.api.changeUserInfo":{
				deep: true,
				handler: function (newValue, oldValue) {					
					 if(newValue){
						 this.$api.post('/user/ckIsAuth').then(res => {
						 	this.userinfo=res.data
							this.$store.commit('CHANGE_USER_INFO',false)
						 })
					 }
				}
			},
		},
		methods:{
				goReg(){
					uni.navigateTo({url:'/pages/my/reg/reg'})
				},
				goConfig(){
					uni.navigateTo({
						url:"/pages/my/config"
					})
				},
				//选择新图片			
				imgChange(imgs){
					this.imgList=imgs
				},
				showUserinfoWin(){
					this.edit_user_info=Object.assign({},this.userinfo)
					this.showUserinfo=true
				},
				onChooseavatar(e) {
					this.edit_user_info.avatarUrl = e.detail.avatarUrl;
					this.edit_user_info.avatar = e.detail.avatarUrl;
				},
				updateUserInfo(){
					this.$api.post('/User/update',this.edit_user_info).then(res => {
						this.userinfo=this.edit_user_info
						confirm.success("更新信息成功!!")
						this.showUserinfo=false
					}).catch(()=>{
						confirm.error("信息更新错误!")
					})
				},
				ckAuth(fun){
					if(this.userinfo.isAuth){
						fun()
					}else{
						confirm.info("请您先点击注册")
					}
				},
				goFavorite(){
					this.ckAuth(()=>{
						uni.navigateTo({
							url:"/pages/my/favorite/favorite_list"
						})
					})
				},			
				goHistory(){
					this.ckAuth(()=>{
						uni.navigateTo({
							url:"/pages/my/history/history"
						})
					})
				},
				goComment(){
					this.ckAuth(()=>{
						uni.navigateTo({
							url:"/pages/my/comment/comment_list"
						})
					})
				},
				goReComment(){
					this.ckAuth(()=>{
						uni.navigateTo({
							url:"/pages/my/recommend/recommend_list"
						})
					})
				},
				goChat(){
					uni.navigateTo({
						url:"/pages/my/message/chat"
					})
				},
				goMessage(){
					uni.navigateTo({
						url:"/pages/my/message/message_list"
					})
				},
				goLog(){
					this.ckAuth(()=>{
						uni.navigateTo({url:'/pages/my/log/log'})
					})
				},
				goGold(){
					this.ckAuth(()=>{
						uni.navigateTo({
							url:"/pages/my/log/gold"
						})
					})
				},
				goReferrer(){
					this.ckAuth(()=>{
						uni.navigateTo({
							url:"/pages/my/referrer/referrer"
						})
					})
				},
				userSign(fun){
					this.ckAuth(()=>{
						this.$api.post('/user/month_sign').then(res => {
							let list=res.data.list
							let sign=[]
							if(list.length>0){
								list.forEach((i)=>{
									sign.push({date:i.ext,info:'签到'})
								})
							}
							this.consecutiveDays=res.data.consecutiveDays
							this.selected=sign
							if(fun){fun()}
						})
					})
				},
				//签到部分
				showSignWin(){
					this.ckAuth(()=>{
						let _this=this
						if(!_this.hasSignToday){
							_this.$api.post('/user/user_sign').then((res)=>{
								
								_this.$api.post('/user/ckIsAuth').then(res => {
									this.userinfo=res.data
								})							
								_this.userSign(()=>{
									_this.hasSignToday=true;
									_this.$refs.calendar.open();
								})
							})
						}else{
							_this.$refs.calendar.open();
						}
					})
				},
				confirm(e) {
				},
				//修改用户信息
				changeInfo(){
					if(this.edit_user_info.name.trim()==''){
						confirm.error("请设置昵称!")
					}else{					
						// 上传图片
						let _this=this
						
						/* 文件上传部分开始 */
						if(_this.edit_user_info.avatar.indexOf('wxfile://')>-1){
							this.$api.upload('/Upload/Upload',_this.edit_user_info.avatarUrl,{}).then((res)=>{
								_this.edit_user_info.avatar=res.data
								_this.updateUserInfo()
							}).catch(()=>{
								confirm.error("文件上传错误!")
							})
						}else{
							_this.edit_user_info.avatar=_this.edit_user_info.avatarUrl
							_this.updateUserInfo()
						}
						/* 文件上传部分结束 */
					}
				},
		}
};
</script>

<style scoped lang="scss">
	.margin-0-top-i{
		margin-top: 0px!important;
	}
	
	.avatarUrl {
		background: #fff;
		padding-left:150rpx;
		button {
			background: #fff;
			line-height: 80rpx;
			height: auto;
			width: auto;
			padding: 0rpx;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.refreshIcon {
				width: 160rpx;
				height: 160rpx;
				border-radius: 6px;
			}

			.jt {
				width: 14rpx;
				height: 28rpx;
			}
		}
		
		button::after {
			border: none;
		}
	}
</style>
